<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="${base}/static/media/css/bootstrap.css" />
<script src="${base}/static/index/vendor/jquery/jquery.min.js"></script>
<script src="${base}/static/index/vendor/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" charset="utf-8"
	src="${base }/static/vendor/bootstrapPager/bootstrapPager.js"></script>
<script type="text/javascript" charset="utf-8"
	src="${base }/static/js/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript">
	
</script>
</head>
<body onload="orderlist(1)" style="font-size:11px;">
	<section id="content">

		<div class="portlet-body">
			<form class="dataform" id="orderlist_form">
				<div class="row">					
					<label style="width:5%;height: 30px;text-align: right;display: inline-block;">卡号：</label>
					<div style="width:14%;height: 30px;display: inline-block;">
						<input type="text" class="form-control" name="sequence" value="">
					</div>

					<label style="width:5%;height: 30px;text-align: right;display: inline-block; ">面额：</label>
					<div style="width:7%;height: 30px;display: inline-block;">
						<select class="form-control" name="facePrice" style="font-size: 13px;">
							<option value="">全部</option>
							<option value="100">100</option>
							<option value="200">200</option>
							<option value="500">500</option>
							<option value="1000">1000</option>
						</select>
					</div>

					<label style="width:7%;height: 30px;text-align: right;display: inline-block;margin-left:2%;">充值卡状态：</label>
					<div style="width:8%;height: 30px;display: inline-block;">
						<select class="form-control" name="statusName" style="font-size: 13px;">
							<option value="">全部</option>
							<option value="0">未消费</option>
							<option value="1">已发卡</option>
							<option value="2" selected="selected">已消费</option>
							<option value="-1">未激活</option>
						</select>
					</div>
					<label style="width:6%;height: 30px;text-align: right;display: inline-block;margin-left:2%;">消费时间：</label>	
					<div style="width:10%;height: 30px;display: inline-block;">
						<input class="form-control" value="" name="beginTime" onclick="WdatePicker()" placeholder="开始时间" type="text">
					</div>-
					
					<div style="width:10%;height: 30px;display: inline-block;">
						<input class="form-control" value="" name="endTime" onclick="WdatePicker()" placeholder="结束时间" type="text">
					</div>	
					<div class="btn-group btn-group-sm btn-group-solid" style="float: right;">
						<a href="javascript:;" onclick="exportOrder()"
							class="btn offline_serch_hide"
							style="margin-right: 30px; background: #852B99; color: #fff; border-color: #852B99;"><i
							class="fa fa-search"></i>导出信息</a>
					</div>
					<div class="btn-group btn-group-sm btn-group-solid" style="float: right;">
						<a href="javascript:;" onclick="orderlist()"
							class="btn offline_serch_hide"
							style="margin-right: 30px; background: #18BC9C; color: #fff; border-color: #18BC9C;"><i
							class="fa fa-search"></i>提交查询</a>
					</div>				
				</div>
				<div style="width: 100%; height: 15px;"></div>
				<div class="table-scrollable">
					<table class="table table-striped table-bordered table-hover"
						data-search="true">
						<thead>
							<tr>
								<th class="text-center">卡号</th>
								<th class="text-center">面额</th>
								<th class="text-center">消费时间</th>
								<th class="text-center">接收人电话</th>
								<th class="text-center">创建时间</th>
								<th class="text-center">状态</th>
								<th class="text-center">领卡人</th>
								<th class="text-center">备注</th>
								<!-- <th class="text-center">斑马订单号</th> -->
							</tr>
						</thead>
						<tbody id="ordercontent"></tbody>
					</table>
					<div>
					<!-- 分页开始 -->
					<ul id="page" class="pagination"></ul>
					<input type="hidden" id="pageNum" name="pageNum" value="1">
					<input type="hidden" id="pageSize" name="pageSize" value="10">
					<!-- 分页结束 -->
					</div>
				</div>
			</form>
		</div>
		<script type="text/javascript">
			function orderlist(pageNum) {
				$("#pageNum").val(pageNum)
				var data = $("#orderlist_form").serializeArray();
				$("#ordercontent").html("")
				$.ajax({
					url : "${base}/admin/card/get",
					type : 'post',
					dataType : 'json',
					data : data,
					success : function(res) {
						//debugger;
						$.each(res.data.list, function(i, obj) {
							var a = obj;
							//debugger;
							var tr = $('<tr>');
							tr.append('<td class="text-center">' + obj.sequence
									+ '</td>');
							tr.append('<td class="text-center">'
									+ obj.facePrice + '</td>');
							tr.append('<td class="text-center">'
									+ obj.consumeTime + '</td>');
							tr.append('<td class="text-center">'
									+ obj.receiveTelephone + '</td>');
							tr.append('<td class="text-center">'
									+ obj.createrTime + '</td>');
							tr.append('<td class="text-center">'
									+ obj.statusName + '</td>');
							tr.append('<td class="text-center">'
									+ obj.receiveName + '</td>');
							if((obj.consumeTime != null && obj.consumeTime !='') && obj.statusName!='已消费'){
								tr.append('<td class="text-center">已退回</td>');
							}else{
								tr.append('<td class="text-center">&nbsp;</td>');
							}
							//订单内容 tbody
							$("#ordercontent").append(tr);
						});

						var total = res.data.total; // 总条数
						var pages = res.data.pages; // 总页数
						var pageNum = res.data.pageNum; // 当前页
						var pageSize = res.data.pageSize; // 每页显示条数

						$("#page").html('').append(Pager({
							totalCount : total, //总条数为150
							pageSize : pageSize, //每页显示6条内容，默认10
							buttonSize : 5, //显示6个按钮，默认10
							pageNum : pageNum, //页码的参数名为'p'，默认为'page'
							prevButton : '上一页', //上一页按钮
							nextButton : '下一页', //下一页按钮
							firstButton : '首页', //第一页按钮
							lastButton : '末页', //最后一页按钮

						}));
					}
				});
				return false;
			}
			/* 导出信息 */
			function exportOrder() {
				var a = document.createElement('a');
				var data = $("#orderlist_form").serialize();
				debugger;
				var url = '${pageContext.request.contextPath}/admin/card/export?'
						+ data;
				//var filename = '订单明细.xls';
				a.href = url;
				//a.download = filename;
				a.click()
			}
		</script>
		<!-- 列表页结束 -->
	</section>
</body>
</html>